<template>
  <!-- 2. 准备具备宽高DOM容器 -->
  <div class="chart" ref="chartRef"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
// 1. 完整引入echarts
import * as echarts from "echarts";

function generateData(len: number) {
  const data: number[] = [];
  for (let i = 0; i < len; i++) {
    data.push(Math.round(Math.random() * 900 + 100));
  }
  return data;
}

const chartRef = ref<HTMLDivElement>();

onMounted(() => {
  // 3. 初始化echarts实例
  const myChart = echarts.init(
    // document.querySelector(".chart") as HTMLDivElement
    chartRef.value
  );
  // 4. 定义图表选项
  const option = {
    xAxis: {
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
    yAxis: {},
    series: {
      type: "line",
      data: generateData(12),
    },
  };
  // 5. 渲染图表
  myChart.setOption(option);
});
</script>

<style scoped>
.chart {
  width: 800px;
  height: 400px;
}
</style>
